<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!--   父组件向子组件传递数据
    1.在子组件标签上自定义属性，值为传递的数据
    2.子组件内容通过props属性来接收（通过this直接访问  -->
    <div id="app">
      <my-father></my-father>
    </div>
    <!-- 父组件 -->
    <template id="father">
      <div>
        <h2>父组件--{{num}}</h2>
        <button @click="addNum">++</button>
        <my-son :num="num"></my-son>
      </div>
    </template>
    <!-- 子组件 -->
    <template id="son">
      <div>
        <h3>子组件--{{num}}</h3>
        <!--传值 {{count}} -->
      </div>
    </template>
    <script>
      /* 子组件 */
      const Son = {
        template: "#son",
        // 用来接收父组件传递过来的内容
        props: ["num"] /*传值 ["count"] */,
      };
      /*   父组件 */
      const Father = {
        template: "#father",
        data() {
          return {
            num: 666,
          };
        },
        components: {
          "my-son": Son,
        },
        methods: {
          addNum() {
            this.num += 1;
          },
        },
      };
      new Vue({
        el: "#app",
        // 注册组件
        components: {
          "my-father": Father,
        },
      });
    </script>
  </body>
</html>
